.record {
  margin: 12px 0;
  padding: 0 20px;
  position: relative;
}

.record.warning {
  background-color: #fffbe6;
}
.warn-rules {
  color: #faad14;
  font-size: 12px;
  padding: 6px 0;
}

.choose-wrap {
  display: flex;
  column-gap: 12px;
  & > :global(.ant-checkbox-wrapper) {
    padding-top: 6px;
  }
  & > :last-child {
    flex: 1;
  }
}

.record-info,
.record-main {
  display: flex;
  column-gap: 8px;
}
:global(.chat-record-send) {
  .choose-wrap,
  .record-info,
  .record-main {
    flex-direction: row-reverse;
  }
}

// ===== record-info =====

.record-info {
  align-items: center;
  height: 32px;

  .sender {
    color: #666;
    font-size: 13px;
  }
  .time {
    color: #aaa;
    font-size: 12px;
  }
  .time.can-quote:hover {
    cursor: pointer;
    color: #0099ff;
  }
  .robot {
    fill: #64d277;
    font-size: 20px;
  }
  .open-api {
    background-color: #f0f0f0;
    border-radius: 2px;
    color: #aaa;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    transform-origin: center;
    transform: scale(0.8, 0.8);
  }
}

// ===== record-main =====

.avatar {
  height: 43px;
  width: 43px;
  img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 4px;
  }
}

.content-wrapper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  max-width: 80%;
  row-gap: 6px;
}
:global(.chat-record-send) .content-wrapper {
  align-items: flex-end;
}

.send-confirming,
.send-failed {
  align-self: flex-end;
  border-radius: 100px;
  padding: 4px;
  svg {
    fill: #fff;
    height: 12px;
    width: 12px;
  }
}
.send-confirming {
  background-color: #ddd;
}
.send-failed {
  background-color: #ff4868;
}

.recalled {
  align-self: flex-end;
  background-color: #f0f0f0;
  border-radius: 2px;
  color: #777;
  font-size: 12px;
  padding: 3px 5px;
}

:global(.chat-record-extra-info) {
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #999;
  font-size: 12px;
  max-width: 300px;
  padding: 6px;
  word-break: break-all;
  word-wrap: break-word;
}

.robot-info > div {
  display: flex;
  label {
    flex-shrink: 0;
  }
}

.from {
  color: #ccc;
  text-align: right;
}
